<template>
  <div class="home-container">
    <!-- 自定义请使用插槽 -->
    <!-- 更改这些样式 需要加上 .  -->
    <van-nav-bar fixed>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          icon="search"
          class="search-btn"
          size="small"
          round
          type="primary"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!--
            - v-model 是否正在加载,触底之后会自动变为true
            - finished 是否加载完毕 true 不会加载了
            - finished-text 加载完毕的文本
            - @load 触底之后加载的逻辑
        -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- 单元格里面可以放任何东西 , 比如九宫格 grid , 图片 等 -->
            <!-- 但是一定要 用 插槽啊啊啊啊啊啊啊啊啊啊!!!! -->

            <!-- 第二个v-for 循环的 是 每个元素里面的图片数组 , 每循环一次就把图片赋值给src -->

            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
              <template #label>
                <van-grid :border="false" :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image  lazy-load fit="cover" :src="img" />
                  </van-grid-item>
                </van-grid>

                <div>
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.comm_count }}评论</span>
                  <span>{{ item.pubdate | fromNow }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入用户频道接口
import { getChannels, getContent } from "./home.js";
// 导入moment 日期包]]
import moment from "moment";
// 改成中文
moment.locale('zh-cn');         // zh-cn
export default {
  data() {
    return {
      active: '',
      channels: [], // 1.频道列表s数组
      list: [], // 列表内容数组
      loading: false, // 触底为 true 则触发 @load 方法
      finished: false, // 为true 则无法加载数据
      timestamp: null, // 先为空, 点进去的时候在给时间戳
      isLoading: false, //下拉刷新 用户下拉后这个值自动为true
    };
  },
  // 在credted 周期中发起请求
  async created() {
    let res = await getChannels();
    console.log(res);
    this.channels = res.data.data.channels; // 2.绑定数据

    // getChannels().then(res=>{   // 这种方法过时了 , 用try catch
    //   console.log(res);
    // })
  },
  //过滤器
  filters: {
    fromNow(value) {
      return moment(value).fromNow();
    },
  },
  methods: {
    async onLoad() {
      // 判断有没有时间戳
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }

      // 频道id 由 频道数组 channels , 因为数组里面本来就有对应的id , 通过active来获得 ,

      let res = await getContent({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp,
      });

      console.log(res);
      //  保存时间戳 , 用来请求下一页的数据
      this.timestamp = res.data.data.pre_timestamp;
      // 因为有十页的内容 , 如果 直接 赋值给 list数组的话 , 就永远只有一页的数据 , 所以要 push 进 push
      this.list.push(...res.data.data.results);
      // 修改loading 为false , 结束触发加载
      this.loading = false;
      // 判断是否需要启动 finished
      if (this.list.length >= 90) {
        this.finished = true;
      }
    },
    onRefresh() {
      // 本质上就是重新刷新页面 , 清空数组 , 渲染数据
      // 只要下拉刷新,就无条件的将finished 为false , 不然会卡死在第一页
      this.finished = false;
      this.timestamp = false; // 下拉刷新时间戳清空,从头开始加载
      // 1.清空数组
      this.list = [];
      // 2.设置上拉加载更多状态为true , (开启底部加载中动画 , )
      this.loading = true;
      // 3.重新请求数据
      this.onLoad();
      // 4.关闭上拉刷新动画 , (如果不写, 上面的上拉刷新动画会一直转圈)
      this.isLoading = false;
    },
    // tab栏切换
    tabClick(){
      // 1. 清空列表
      this.list = []
      // 2. 无条件将finished 为flase
      this.finished = false;
      // 3. 设置loading 状态为true , 开始加载
      this.loading = true
      // 3. 主动调用onLoad
      this.onLoad()
    }
  },
};
</script>

<style lang="less">
.home-container {
  // 1vh = 屏幕高度 1/100
  height: 100vh;
  padding-top: 46px;
  padding-bottom: 50px;
  box-sizing: border-box;
  .van-nav-bar {
    background-color: rgb(0, 152, 250);
    .logo {
      background: url("../../assets/logo.png") no-repeat;
      background-size: cover;
      width: 100px;
      height: 30px;
    }
    .search-btn {
      background-color: #5babfb;
      width: 100px;
      font-size: 14px;
      border: none;
      .van-icon {
        color: #fff;
      }
      .van-button__text {
        color: #fff;
      }
    }
  }

  // tab栏 > 上面tab栏 + 下方list展示盒子
  .van-tabs {
    // 先给主盒子加些基本样式
    box-sizing: border-box; // c3盒模型
    height: 100%; // 高度
    padding-top: 46px; // 距离
    // 上面tab栏
    .van-tabs__wrap {
      position: fixed; // 记住写样式去浏览器右键检查
      width: 100%; // 记住写样式去浏览器右键检查
      top: 46px; // 记住写样式去浏览器右键检查
      z-index: 10; // 记住写样式去浏览器右键检查
    }

    .van-tabs__content {
      // 记住写样式去浏览器右键检查
      height: 100%; // 记住写样式去浏览器右键检查
      overflow-y: scroll; // 记住写样式去浏览器右键检查

      // 文字间距                            // 记住写样式去浏览器右键检查
      .van-cell__label span {
        // 记住写样式去浏览器右键检查
        padding-right: 10px; // 记住写样式去浏览器右键检查
      }
    }
  }
}
</style>
